<template>
  <PanelLayout>
    <div class="two-cell">
      <div class="title">受端换流站</div>
      <div class="list-wrap">
        <div class="item" v-for="(item, index) in list" :key="index">
          <img class="bg" src="@/assets/images/blue-big.png" alt="" />
          <div class="value">{{ item.value }}</div>
          <div class="label" v-html="item.label"></div>
        </div>
      </div>
    </div>
  </PanelLayout>
</template>

<script setup name="FourCell">
import PanelLayout from '@/views/index/PanelLayout.vue'

import { randomLenNum } from '@/utils/index.js'
import { getFcJplIndex4 } from '@/api/base.js'

import useAppStore from '@/store/modules/app'
const appStore = useAppStore()

const list = ref([
  // { value: 314.312, label: '交流频率偏差' },
  // { value: 314.312, label: '直流电压KV' }, //
  // { value: 314.312, label: '电容电压' },
  // { value: 314.312, label: '环流大小' },
  // { value: 314.312, label: '直流电流KA' }, //
  // { value: 314.312, label: '交流频率Hz' } //
  // { value: 314.312, label: '电压波动率' },
  // { value: 314.312, label: '虚拟内电势' }
])

const init = () => {
  // 模拟接口获取数据

  getFcJplIndex4({ time: appStore.timePoint }).then(res => {
    if (res.code == '0000') {
      list.value = res.data
    }
  })
  // list.value.forEach(item => {
  //   item.value = randomLenNum(3)
  // })
}

init()

watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)
</script>

<style lang="scss" scoped>
// 循环旋转动画
@keyframes rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }

  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
.two-cell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  .title {
    font-size: 18px;
    height: 16px;
  }
  .list-wrap {
    width: 100%;
    flex: 1;
    position: relative;
    display: flex;
    gap: 20px;
    .item {
      flex: 1;
      height: 100%;
      position: relative;

      .bg {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 70%;
        aspect-ratio: 1/1;
        animation: rotate 10s linear infinite;
      }

      .value {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 70%;
        aspect-ratio: 1/1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        font-weight: bold;
      }

      .label {
        font-size: 14px;
        text-align: center;
        position: absolute;
        left: 50%;
        bottom: 5%;
        transform: translateX(-50%);
        width: 100%;
      }
    }
  }
}
</style>
